<template>
	<view class="app">
		<view class="content">
			<text class="header">
				账号登录
			</text>
			<view class="login">
				<van-field placeholder="请输入手机号" :auto-focus='true' :value="user.mobile" data-type="mobile"
					:adjust-position='true' @input='changge' :error-message='message.mobile' @change='inputUser'>
				</van-field>
				<van-field center clearable placeholder="请输入短信验证码" data-type="code" :value="user.code"
					@change='inputUser' use-button-slot :error-message='message.code'>
					<van-button slot="button" size="small" type="primary" plain @click='setCode'>
						发送验证码
					</van-button>
				</van-field>
				<view class="buttom">
					<van-button color='linear-gradient(315deg,#fe4f4f8f,#fc662773)' block size="normal"
						custom-style='width:90%' @click='login'>
						登录</van-button>
					<text class="code">验证码：246810</text>
				</view>
			</view>
		</view>
		<!-- 消息提示节点 -->
		<van-notify id="van-notify" />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import request from '@/api/index.js'
	// 消息提示 
	import Notify from '../../wxcomponents/vant/notify/notify';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const userlog = ref('')
	onLoad((e) => {
		userlog.value = e.user
	})
	const user = reactive({
		mobile: undefined,
		code: undefined
	})
	const message = reactive({
		mobile: "",
		code: ''
	})
	const changge = (event) => {
		const phone = event.detail || event;
		if (/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
			message.mobile = '';
		} else {
			message.mobile = '手机号码格式不对'
		}
	}
	const inputUser = (e) => {
		// console.log(e);
		user[e.target.dataset.type] = e.detail
		if (user.code) {
			message.code = ''
		}
	}
	// 发送验证码
	const setCode = async () => {
		let {
			data
		} = await request(`http://toutiao.itheima.net/v1_0/sms/codes/${user.mobile}`)
		console.log(data);
		if (data.message == 'Ok') {
			Notify({
				type: 'success',
				message: '验证码发送成功'
			});
		} else {
			// console.log(23);
			Notify({
				type: 'danger',
				message: data.message
			});
		}
	}
	// 登录接口
	const login = async () => {
		if (!user.mobile) {
			message.mobile = '手机号不能为空'
		}
		if (!user.code) {
			message.code = '验证码不能为空'
		}
		if (!user.mobile || !user.code) {
			return
		}
		let {
			data
		} = await request('http://toutiao.itheima.net/v1_0/authorizations', "POST", user)
		if (data.message == 'OK') {
			Notify({
				type: 'success',
				message: "登录成功"
			});
			uni.setStorageSync('token', data.data.token)
			uni.setStorageSync('refresh_token', data.data.refresh_token)
			if (userlog.value == 1) {
				uni.switchTab({
					url:'/pages/User/User'
				})
			} else {
				uni.navigateBack()

			}
		} else {
			Notify({
				type: 'danger',
				message: data.message
			});
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20% 5% 0 5%;

		.header {
			font-size: 20px;
			font-weight: 100;
		}

		.login {
			margin-top: 11%;

			.buttom {
				margin-top: 10%;
				text-align: center;

				van-button {
					border-radius: 5px;
				}

				.code {
					display: block;
					padding-top: 10px;
				}
			}
		}
	}
</style>
